<template>
  <div class="data-source-container">
    <div class="left">
      <div class="left-title">数据源</div>
      <div class="table-list">
        <template v-for="(item, index) in interfaces">
          <div
            :class="[
              'table-item',
              { active: operateTbaleId == item.id },
            ]"
            :key="index"
            :title="item.apiDescription === '' ? item.apiName : item.apiName + '(' + item.apiDescription + ')'"
            v-if="item.apiName.indexOf(apiSearch) > -1"
            @click="apiListSelect(item)"
          >
            <p>{{ item.apiName }} <span v-if="item.apiDescription!==''">({{item.apiDescription}})</span></p>
          </div>
        </template>
      </div>
    </div>
    <div class="right">
      <a-table
        ref="table"
        bordered
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
      </a-table>
      <a-button @click="queryData" type="primary" :disabled="operateTbaleId == null">数据预览</a-button>
    </div>

  </div>
</template>

<script>
import { getAction, postAction } from '@/api/manage'

export default {
  name: 'CreateIndexByInterface',
  data() {
    return {
      apiSearch: '',
      operateTbaleId: null,
      opretaTbale: {},
      interfaces: [],
      selectedRowKeys: [],
      selectionRows: [],
      dataSource: [],
      columns: [
        {
          title: '目标字段',
          align: 'center',
          dataIndex: 'code'
        },
        {
          title: '宁段描述',
          align: 'center',
          dataIndex: 'name'
        },
        {
          title: '数据类型',
          align: 'center',
          dataIndex: 'type'
        }
        // {
        //   title: '数据格式',
        //   align: 'center',
        //   dataIndex: 'dataFormat'
        // }
      ]
    }
  },
  mounted() {
    this.getInterfaces()
  },
  beforeDestroy() {
  },
  methods: {
    queryData() {
      postAction('/dataSource/scApi/queryDataByApiId', { apiId: this.operateTbaleId }).then(res => {
        if (res.success) {
          console.log(res.result)
          // this.opretaTbale = res.result
        }
      })
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
    apiListSelect(item) {
      this.operateTbaleId = item.id
      this.opretaTbale = item
      getAction('/dataSource/scApi/queryById', { id: item.id }).then(res => {
        if (res.success) {
          this.opretaTbale = res.result
          this.dataSource = res.result.scApiRepList
        }
      })
    },
    getInterfaces() {
      getAction('/dataSource/scApi/list', { pageNo: 1, pageSize: 10000 }).then(res => {
        if (res.success) {
          this.interfaces = res.result.records
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.data-source-container {
  height: calc(100%);
  display: flex;
  justify-content: center;
  user-select: none;

  & > .left {
    width: 250px;
    height: 100%;
    background: #fafafa;
    border-bottom: 4px solid #ffffff;

    & > .left-title {
      height: 36px;
      line-height: 36px;
      font-size: 15px;
      color: #000022;
      text-align: center;
      background-color: #eff4f9;
    }

    & > .left-select-box {
      position: relative;
      padding: 10px;
      border-bottom: 4px solid #ffffff;

      .ant-select {
        width: 200px;
        margin-bottom: 10px;
      }

      & > .ant-input {
        width: 200px;
      }

      .icon1 {
        position: absolute;
        width: 20px;
        height: 32px;
        font-size: 20px;
        top: 10px;
        right: 10px;
        cursor: pointer;
        line-height: 35px;
      }

      .icon2 {
        position: absolute;
        width: 20px;
        height: 32px;
        font-size: 22px;
        top: 53px;
        right: 10px;
        cursor: pointer;
        line-height: 35px;
      }
    }
    & > .table-list {
      height: calc(100% - 138px);
      overflow-x: hidden;
      overflow-y: auto;
      padding: 10px 0;

      .table-item {
        cursor: pointer;

        & > p {
          height: 36px;
          line-height: 36px;
          padding: 0 10px;
          margin-bottom: 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          border-bottom: 1px dashed #e8e8e8;
        }

        &:hover,
        &.active {
          background-color: #eff4f9;
        }
      }
    }
  }
  & > .right {
    flex: 1;
		width: calc(100% - 275px);
    height: 100%;
    margin-left: 15px;
    background: #fafafa;
    overflow: hidden;
    position: relative;
  }
}
</style>
